<!-- 此处是首页的左右图文模块 带框的 -->
<template>
    <section class="component component--module ad">
        <div class="element element--ad is-loaded">
            <div id="ad-section-native" class="j-ad">
                <a class="element e-ad" href="" target="_blank">
                    <figure class="ad__figure">
                        <img class="ad__image" src="">
                    </figure>
                    <div class="ad__content">
                        <div class="ad__sponsor">
                            <img class="sponsor__logo" src="">
                            <span class="sponsor__label">CME Group</span>
                        </div>
                        <h3 class="ad__headline">3 Lumber Traders Discuss Risks in the Market</h3>
                        <p class="ad__summary">As uncertainty persists in the lumber market, lumber futures are seeing
                            record interest.
                        </p>
                        <button class="btn btn--primary">
                        </button>
                    </div>
                </a>
            </div>
        </div>
    </section>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.e-ad {
    background: #f7f7f7;
    box-shadow: inset 0 0 0 1px #e1e1e1;
    padding: 20px 20px;
    display: flex;
    flex-flow: row nowrap
}

.e-ad:hover {
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px #d4d4d4;
}

.e-ad .ad__figure {
    flex: 1;
    max-width: 220px;
}

.e-ad .ad__content {
    flex: 1;
    margin-left: 10px;
}

.sponsor__label {
    text-transform: uppercase;
    color: #648c94;
    font-size: 10px;
    font-weight: bold;
}
</style>